<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input id="inp" placeholder="请输入内容" type="text">
    <select id="sel">
        <option value="">请选择</option>
        <option value="公务员">公务员</option>
        <option value="快递员">快递员</option>
    </select>
    <script>
        // 在现代浏览器中, 可以直接通过id访问元素的dom对象
        inp.onkeydown = function () {
            // 此处无法获取用户输入的内容
            console.log('键盘按键被按下', this.value);
        }
        inp.onkeyup = function () {
            console.log('键盘按键被松开', this.value);
        }
        document.body.onkeydown = function () {
            console.log('在body中按下了键盘按键');

        }
        document.body.onkeyup = function () {
            console.log('在body中松开了键盘按键');
        }
        // change事件: 表单元素特有的事件, 当表单元素的值发生变化的时候, 会触发(在表单元素失去焦点的时候触发)
        inp.onchange = function () {
            console.log('input的值发生了变化',this.value);
        }
        // 实时触发
        inp.oninput = function () {
            console.log('input事件被触发了', this.value);
        }
        sel.onchange = function () {
            console.log('select下拉框的值发生了变化', this.value);
        }

    </script>
</body>

</html>